<template>
    <!-- 网上交易功能设置 -->
    <div class="onlineTradingFunSet" v-loading="isLoading">
        <cardComponent pageTitle="网上交易功能设置">
            <template slot="cardBody">
                <el-form v-model="searchFormOne" label-width="80px" size="small">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="账户类别:" label-position="left" prop="mainCardNo">
                                <el-input disabled v-model="accountType" style="width: 200px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="卡号:" label-position="left" prop="CARDNO">
                                <el-input v-model="searchFormOne.CARDNO" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-button
                                type="primary"
                                size="small"
                                @click="hanleSure"
                                icon="el-icon-circle-check"
                            >确定</el-button>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="dialogVisible" v-show="dialogVisible">
                    <el-form :model="searchForm" size="small" label-width="50%" ref="searchForm">
                        <el-form-item label="账户类别：" label-position="left">个人卡账户</el-form-item>

                        <el-form-item label="卡号：" label-position="left" prop="CARDNO">
                            <el-input v-model="searchForm.CARDNO" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="人民币网上交易状态：" label-position="left" prop="CCYN">
                            <el-input v-model="searchForm.CCYN" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="人民币网上交易限额：" label-position="left" prop="ACCAMT">
                            <!-- <el-input v-model="searchForm.ACCAMT" disabled></el-input>
                            -->
                            {{ Number(searchForm.ACCAMT).toFixed(2)}}
                        </el-form-item>
                    </el-form>
                    <el-form
                        :model="newSearch"
                        size="small"
                        label-width="50%"
                        ref="searchForm"
                        :rules="rules"
                    >
                        <el-form-item label="新的网上交易日限额：" label-position="left" prop="CCAMT">
                            <el-input v-model="newSearch.CCAMT"></el-input>
                        </el-form-item>

                        <div class="btnBox" v-if="this.searchForm.CCYN === '永久开通'">
                            <el-button type="primary" size="small" @click="hanleUpdate">修改网上交易限额</el-button>
                            <el-button type="primary" size="small" @click="handleClose">关闭人民币网上交易</el-button>
                            <!-- <el-button type="primary" size="small" @click="handleClose">关闭</el-button> -->
                        </div>
                        <div class="btnBox" v-if="this.searchForm.CCYN === '已关闭'">
                            <el-button type="primary" size="small" @click="hanleOpen">开通网上交易限额</el-button>
                        </div>
                    </el-form>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { ONLINE_TRADING_IS_OPEN } from '@/utils/Contants';
import { RegConfig } from '@/utils/RegConfig';
import { reolaceString, strZeroFill, getAccountTypeName } from '@/utils/Common';
import cardComponent from '@/components/cardComponent/cardComponent.vue';

export default {
    name: 'onlineTradingFunSet',
    components: {
        cardComponent,
    },
    data() {
        return {
            searchFormOne: {
                CARDNO: '',
            },
            searchForm: {
                CARDNO: '', // 卡号
                CCYN: '', // 交易状态
                ACCAMT: '', // 第一币种交易限额
            },
            newSearch: {
                CCAMT: '0',
            },
            // 是否使用密码
            pinchk: '',
            // 是否开通
            SERCNT: '99999999999999999999',
            dialogVisible: false,
            // 判断是查询还是修改
            // searchOrUpdate:'0',
            isLoading: false,
            accountType: '', // 账户类别
            rules: {
                CCAMT: [
                    { pattern: RegConfig.integerAmount, message: '请输入整数，首位不可为0', trigger: 'blur' },
                ],
            },
        };
    },
    filters: {

    },
    async mounted() {
        this.searchFormOne.CARDNO = this.cardInfo_3004.CARDNO;
        this.accountType = await getAccountTypeName(this.cardList_3601, this.cardInfo_3004, this);
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
        cardList_3601: state => state.common.cardList_3601,
        defaultParams: state => state.common.defaultParams,
        defaultpinFlag: state => state.common.pinFlag,
    }),
    methods: {
        // 点击按钮进行是否
        hanleSure() {
            this.hanleTableData();
        },
        // 点击确定按钮进行查询
        hanleSure() {
            this.searchOrUpdate = '0';
            this.dialogVisible = true;
            // 点击查询调3004接口
            this.getFormData();
        },
        // 点击修改按钮
        hanleUpdate() {
            this.SERCNT = reolaceString(this.SERCNT, 10, 2);
            this.SERCNT = reolaceString(this.SERCNT, 12, 2);
            this.$confirm('确定修改网上交易限额？', '提示', { customClass: 'warning', type: 'warning' }).then(() => {
                this.hanleTableData();
                this.newSearch.CCAMT = '0';
            }).catch(() => {

            });
        },
        // 点击关闭网上交易限额
        handleClose() {
            this.SERCNT = reolaceString(this.SERCNT, 10, 4);
            this.$confirm('确定关闭网上交易限额？', '提示', { customClass: 'warning', type: 'warning' }).then(() => {
                this.hanleTableData();
                this.newSearch.CCAMT = '0';
            }).catch(() => {

            });
        },
        // 点击开通网上交易限额
        hanleOpen() {
            this.SERCNT = reolaceString(this.SERCNT, 10, 2);
            this.SERCNT = reolaceString(this.SERCNT, 12, 2);
            this.$confirm('确定开通网上交易限额？', '提示', { customClass: 'warning', type: 'warning' }).then(() => {
                this.hanleTableData();
            }).catch(() => {

            });
        },
        // 点击查询调3004接口
        getFormData() {
            this.isLoading = true;
            const appBody = {
                CARDNO: this.cardInfo_3004.CARDNO || '', // 卡号
                PINFLAG: this.defaultpinFlag, // 是否检查密码标志
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3004';
            defaultParams.body.appBody = appBody;
            // 3004交易
            this.$post.common.transPort(defaultParams).then((res) => {
                this.isLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 111111);
                    if (result.sysHead.rspCd === '000000') {
                        this.searchForm = result.body.appBody || [];
                        const that = this;
                        ONLINE_TRADING_IS_OPEN.forEach((item) => {
                            if (item.value === that.searchForm.CCYN) {
                                that.searchForm.CCYN = item.name;
                            }
                        });
                        return this.searchForm.CCYN;
                    }
                    const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                    this.$alert(errorMsg, '提示', {
                        customClass: 'error', type: 'error',
                    });
                } else {
                    this.$alert('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },
        hanleTableData() {
            this.isLoading = true;
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                PINFLAG: this.defaultpinFlag, // 是否检查密码标志
                SERCNT: this.SERCNT, // 0为不开通 1为开通 9为不作修改
                CCAMT: strZeroFill(this.newSearch.CCAMT, 9), // 网上交易额
                STSCHK: 'N', // N：不检查，任何状态都允许操作 其他：检查 卡片检查状态
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '4012';
            defaultParams.body.appBody = appBody;
            // 4012交易
            this.$post.common.transPort(defaultParams).then((res) => {
                this.isLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 2222);
                    if (result.sysHead.rspCd === '000000') {
                        this.searchForm = result.body.appBody || [];
                        this.$alert(result.sysHead.rspMsg, '提示', {
                            customClass: 'success', type: 'success',
                        });
                        this.getFormData();
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$alert('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },

    },
};
</script>

<style lang='scss'>
.onlineTradingFunSet {
    width: 98%;
    background: #fff;
    // padding:10px;
    box-sizing: border-box;
    border-radius: 5px;

    /* //头部内容 */
    .tab-header {
        width: 100%;
        text-align: left;
        span {
            font-size: 14px;
        }
        .headerTitle {
            font-size: 16px;
            margin: 10px 0px;
            color: skyblue;
        }
    }
    .btnBox {
        text-align: center;
    }
    .dialogVisible {
        margin: 108px auto 0;
        .el-form-item__content {
            text-align: left;
        }
    }
}
</style>
